import React from 'react';
import {
  Box,
} from '@mui/material';
import { TypeSectionScrollReveal } from 'components/elements/TypeSectionsScrollReveal';
import { 
  KickstartBenefits,
  LatestFeatures,
  ReactGraphs,
  RechartsAnalysis,
  NodeTracing,
  SharedNotifications,
  EnergizeSales,
  UptimeMonitoring,
  Support247
} from 'text/DevSubscribers';
import { useDarkMode } from 'contexts/DarkMode';

// Import the style objects and color constants from the SubscriberTextStyles file
import { 
  iconSx,
  largeHeaderSx,
  smallHeaderSx,
  buttonSx,
  listItemSx,
  normalTextColor,
  contrastTextColor,
  normalHeaderColor,
  normalIconColor
} from 'text/SubscriberTextStyles';

const FeaturesPage = () => {
  const { darkMode } = useDarkMode();
  
  return (
    <Box
      sx={{
        width: '100%',
        maxWidth: '1200px',
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
  
      <TypeSectionScrollReveal
        paddingY={1}
        paddingX={1}
        direction="left"
        useInnerBox={true}
        text={<KickstartBenefits 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
      />  
      
      <TypeSectionScrollReveal
        paddingY={1}
        paddingX={1}
        direction="right"
        useInnerBox={true}
        text={<LatestFeatures 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={1}
        paddingX={1}
        direction="left"
        useInnerBox={true}
        backgroundColor="primary.main"
        text={<ReactGraphs 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, contrastTextColor)}
          largeHeaderSx={largeHeaderSx(darkMode, contrastTextColor)}
          smallHeaderSx={smallHeaderSx(darkMode, contrastTextColor)}
          buttonSx={buttonSx(darkMode, contrastTextColor)}
          listItemSx={listItemSx(darkMode, contrastTextColor)}
        />}
      />  
      
      <TypeSectionScrollReveal
        paddingY={1}
        paddingX={1}
        direction="right"
        useInnerBox={true}
        text={<RechartsAnalysis 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={1}
        paddingX={1}
        direction="left"
        useInnerBox={true}
        text={<NodeTracing 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
      />    
      
      <TypeSectionScrollReveal
        paddingY={1}
        paddingX={1}
        direction="right"
        useInnerBox={true}
        text={<SharedNotifications 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={1}
        paddingX={1}
        direction="left"
        useInnerBox={true}
        text={<EnergizeSales 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
      />    
      
      <TypeSectionScrollReveal
        paddingY={1}
        paddingX={1}
        direction="right"
        useInnerBox={true}
        text={<UptimeMonitoring 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, normalIconColor)}
          largeHeaderSx={largeHeaderSx(darkMode, normalHeaderColor)}
          smallHeaderSx={smallHeaderSx(darkMode, normalTextColor)}
          buttonSx={buttonSx(darkMode, normalTextColor)}
          listItemSx={listItemSx(darkMode, normalTextColor)}
        />}
        innerBoxSx={{ display: "flex", justifyContent: "center" }}
      />
  
      <TypeSectionScrollReveal
        paddingY={1}
        paddingX={1}
        direction="left"
        useInnerBox={true}
        backgroundColor="primary.main"
        text={<Support247 
          darkMode={darkMode}
          iconSx={iconSx(darkMode, contrastTextColor)}
          largeHeaderSx={largeHeaderSx(darkMode, contrastTextColor)}
          smallHeaderSx={smallHeaderSx(darkMode, contrastTextColor)}
          buttonSx={buttonSx(darkMode, contrastTextColor)}
          listItemSx={listItemSx(darkMode, contrastTextColor)}
        />}
      />
    </Box>
  );
};

export default FeaturesPage;